<!-- 助教页面 -->
<template>
  <div class="pages" v-if="pageShow">
    <div class="page-top">
      <headerTitle :navTitle="'课件与视频>财务管理课程'"></headerTitle>
      <div class="pages-title">财务管理课程（一）</div>
      <div class="pages-info">
        <div class="info-video">
          <MyVideo></MyVideo>
        </div>
        <div class="info-dialogue">
          <iframe
            src="http://dify.me-jia.com/chatbot/LmzZVVyamFE78whW"
            frameborder="0"
            style="width: 100%; height: 500px"
          ></iframe>
        </div>
      </div>
    </div>

    <div class="curriculum">
      <div class="curriculum-type">
        <div
          style="margin-right: 20px"
          :class="tabIndex == 1 ? 'active' : ''"
          @click="tabFn(1)"
        >
          课程目录
        </div>
        <div :class="tabIndex == 2 ? 'active' : ''" @click="tabFn(2)">
          课堂作业
        </div>
      </div>
      <div class="" style="margin-bottom: 20px" v-if="tabIndex == 1">
        <el-table :data="tableData" style="width: 100%">
          <el-table-column prop="knowledgePoints" label="章节知识点" />
          <el-table-column prop="courseAttachments" label="课程附件" />
        </el-table>
      </div>
      <div class="curriculum-content" v-if="tabIndex == 2">
        <taskTemp :questions="questions" ref="taskTempRef"></taskTemp>
      </div>
      <div class="curriculum-btn" v-if="tabIndex == 2">
        <el-button type="primary" @click="submitFn">提交作业</el-button>
      </div>
    </div>
  </div>
</template>
<script setup>
import headerTitle from "@/components/headerTitle.vue";
import { assistantDetail, catalogue } from "@/request/api";
import taskTemp from "./components/taskTemp.vue";
import { ref, reactive, toRefs, onMounted } from "vue";
import MyVideo from "@/components/MyVideo";
let state = reactive({
  questions: [],
  tableData: [],
});
let tabIndex = ref(1);
let pageShow = ref(false);
let taskTempRef = ref(null);
function tabFn(index) {
  tabIndex.value = index;
}
function getDetail() {
  assistantDetail().then((res) => {
    let { code, data } = res;
    if (code == 200) {
      pageShow.value = true;
      let { questions } = data;
      console.log(questions, "-questions----");
      state.questions = questions;
    }
  });
}
const { questions, tableData } = toRefs(state);
onMounted(() => {
  getDetail();
  getCatalogue();
});

function submitFn() {
  console.log(taskTempRef.value.tabList, "---提交作业信息---");
}

function getCatalogue() {
  catalogue().then((res) => {
    let { list } = res.data;
    console.log(list, "-list---");
    state.tableData = list;
  });
}
</script>

<style lang="less" scoped>
.active {
  border-bottom: 3px solid #409eff;
  color: #409eff;
}
.pages {
  height: calc(100vh - 120px);

  overflow: auto;
  .page-top {
    padding: 20px;
    box-shadow: 0 0 4px 0 #999;
    border-radius: 10px;
    margin: 20px;
    height: 605px;
    .pages-title {
      font-size: 20px;
      font-weight: 600;
      margin-bottom: 20px;
    }
    .pages-info {
      display: flex;
      align-items: center;
      justify-content: space-between;
      .info-video {
        flex: 2;
        height: 300px;

        margin-right: 10px;
      }
      .info-dialogue {
        flex: 1;
        height: 100%;
        height: 300px;

        // background: #b0e2ff;
      }
    }
  }

  .curriculum {
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 0 4px 0 #999;
    border-radius: 10px;
    margin: 20px;
    .curriculum-type {
      display: flex;
      align-items: center;
      background: #e9f3ff;
      cursor: pointer;
      div {
        opacity: 1;
        margin: 20px;
        margin-bottom: 0;
        padding-bottom: 20px;
      }
    }
    .curriculum-content {
      height: 100%;
      margin-bottom: 20px;
    }
  }
}
</style>
